<template>
  <div class="medicineManage-container">
    <div class="header-container tools-container">
      <XmCardHeader
        title="快速编辑"
        subTitle="导入表格前需下载模板表格并按要求填写数据"
      ></XmCardHeader>
      <div>
        <el-button type="primary" @click="add">添加器械</el-button>
        <el-button type="primary" @click="uploadXLS">导入表格</el-button>
        <el-button>下载模板</el-button>
      </div>
    </div>
    <div class="header-container">
      <el-form :model="d.form" label-width="80px" ref="seachRef">
        <el-row :gutter="20">
          <el-col :span="6">
            <xm-f-intput
              label="器械名称:"
              v-model="d.form.apparatusName"
              prop="apparatusName"
            ></xm-f-intput>
          </el-col>
          <el-col :span="6">
            <xm-f-intput
              label="器械型号:"
              v-model="d.form.deviceModel"
              prop="deviceModel"
            ></xm-f-intput>
          </el-col>
          <el-col :span="6">
            <xm-f-intput
              label="器械ID:"
              v-model="d.form.id"
              prop="id"
            ></xm-f-intput>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="6">
            <XmFSelect
              label="器械分类:"
              v-model="d.form.type"
              :options="deviceClassification"
              prop="type"
            ></XmFSelect>
          </el-col>
          <el-col :span="6">
            <XmFSelect
              label="适用年龄:"
              v-model="d.form.intendedAge"
              :options="deviceFitPeople"
              prop="intendedAge"
            ></XmFSelect>
          </el-col>
          <el-col :span="10">
            <el-form-item label="寿命/保修期区间:" label-width="120px">
              <el-input
                v-model="d.form.startTermValidity"
                style="width: 40%"
              ></el-input>
              至
              <el-input
                v-model="d.form.endTermValidity"
                style="width: 40%"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <XmFIntput
              v-model="d.form.recordNo"
              label-width="180px"
              label="医疗器械注册证编号/备案:"
              prop="recordNo"
            ></XmFIntput>
          </el-col>
          <el-col :span="12">
            <XmFIntput
              v-model="d.form.approvalNumber"
              label-width="180px"
              label="生产许可证/备案凭证编号:"
              prop="approvalNumber"
            ></XmFIntput>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <XmFIntput
              label-width="180px"
              v-model="d.form.productTechnologyNo"
              label="产品技术要求编号:"
              prop="productTechnologyNo"
            ></XmFIntput>
          </el-col>
          <el-col :span="10">
            <el-form-item label="创建时间:" prop="time">
              <XMDatePicker
                type="daterange"
                v-model="d.form.time"
                v-model:startTime="d.form.startTime"
                v-model:endTime="d.form.endTime"
                disabledDateT="after"
                label="选择开始时间:"
                prop="fillingTime"
                style="width: 180px"
              ></XMDatePicker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="3">
            <el-button @click="seachData" type="primary" style="width: 100%">
              筛选
            </el-button>
          </el-col>
          <el-col :span="3">
            <el-button @click="clear" style="width: 100%">清空</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="content-container">
      <PaginationTable :tableData="d.listData" @pagination="paginaChange">
        <XMTableColumn label="器械ID" prop="id" width="80"></XMTableColumn>
        <XMTableColumn
          label="器械名称"
          prop="apparatusName"
          width="80"
        ></XMTableColumn>
        <XMTableColumn
          label="适用年龄"
          prop="intendedAge"
          width="80"
        ></XMTableColumn>
        <XMTableColumn
          label="器械型号"
          prop="deviceModel"
          width="80"
        ></XMTableColumn>
        <XMTableColumn label="分类" prop="type" width="80"></XMTableColumn>
        <XMTableColumn
          label="适用范围(预期用途）"
          prop="intendedUse"
        ></XMTableColumn>
        <XMTableColumn
          label="寿命/保修期(月)"
          sortable="custom"
          prop="termValidity"
          width="150"
        ></XMTableColumn>
        <XMTableColumn
          label="创建时间"
          prop="createTime"
          width="100"
        ></XMTableColumn>
        <XMTableColumn label="凭证编号" prop="approvalNumber"></XMTableColumn>
        <XMTableColumn label="操作" width="180">
          <template #default="scope">
            <el-button size="small" type="primary" @click="edit(scope.row)">
              编辑
            </el-button>
            <el-button size="small" type="danger" @click="del(scope.row)">
              删除
            </el-button>
          </template>
        </XMTableColumn>
      </PaginationTable>
    </div>
  </div>
</template>
<script>
  import { reactive, toRefs, ref, onBeforeMount } from 'vue'
  import { useRouter } from 'vue-router'
  import medicinal from '@/hooks/medicinal.vue'
  import { deviceLists, delData } from '@/api/modules/device'
  import fileHook from '@/hooks/file.vue'
  import { uploadXlS } from '@/api/modules/upload'
  import common from '@/utils/common.js'
  export default {
    setup() {
      onBeforeMount(() => {
        seachData()
      })
      const d = reactive({
        form: {},
        listData: {},
        search: { pageIndex: 1, pageSize: 5, orderType: 1 },
      })

      const seachData = async function () {
        const res = await deviceLists({ ...d.search, ...d.form })
        d.listData = res
      }

      const paginaChange = function (params) {
        d.search.pageIndex = params.current
        d.search.pageSize = params.pageSize
        d.search.orderType = params.orderType
        seachData()
      }
      // 清空数据
      const seachRef = ref(null)
      const clear = function () {
        d.form.startTermValidity = null
        d.form.endTermValidity = null
        d.form.startTime = null
        d.form.endTime = null
        seachRef.value.resetFields()
      }

      // 添加add
      const router = useRouter()
      const add = function () {
        router.push({ name: 'addDevice' })
      }

      // 编辑
      const edit = function (row) {
        router.push({ name: 'addDevice', query: { id: row.id } })
      }

      const del = async function (row) {
        await delData({ id: row.id })
        seachData()
      }

      const { selXLS } = fileHook()
      const uploadXLS = async function () {
        const { base64, fileName } = await selXLS()
        common.XmLoading(true)
        uploadXlS(base64, 3, fileName)
          .then((res) => {
            common.XmLoading(false)
            common.XmMessage(0, '导入成功')
            seachData()
          })
          .catch(() => common.XmLoading(false))
      }
      return {
        d,
        clear,
        seachRef,
        seachData,
        paginaChange,
        add,
        edit,
        del,
        uploadXLS,
        ...toRefs(medicinal()),
      }
    },
  }
</script>
<style lang="scss" scoped>
  @import '@/styles/mixin.scss';
  .medicineManage-container {
    margin: 22px;
    .tools-container {
      margin-bottom: 22px;
      span {
        margin-top: 5px;
        font-size: 12px;
        color: #606266;
      }
    }
    .header-container {
      @include card-shadow;
      padding: 12px;
      background-color: white;
      .el-form-item {
        margin-top: 15px;
        margin-bottom: 15px;
      }
    }
    .content-container {
      @include card-shadow;
      margin-top: 22px;
      background-color: white;
      padding: 11px;
      .add-medicine {
        margin: 12px;
      }
    }
  }
</style>
